<template>
  <ContainerGroup>
    <Container style="margin-bottom: 10px">
      <FilterForm
        ref="filterForm"
        :elements="filterElements"
        @submit="resetForm"
        @reset="searchSubmit"
      />
    </Container>
    <Container height="fill" :scroll-y="true" display="flexY">
      <OperationContainer style="margin-bottom: 10px;display: flex;align-items: center;">

        <div style="margin-right:20px">最近一次更新时间：2021-09-22 17:55:55</div>
      </OperationContainer>
      <el-table
        v-loading="loading"
        :data="tableData"
        border
        :header-cell-style="{background:'#fafafa',borderColor:'#e7ecf8'}"
        header-row-class-name="ck-table-header"
        row-class-name="ck-table-row"
        size="small"
      >
        <el-table-column align="center" type="index" label="" width="60" />
        <el-table-column type="selection" width="55" />
        <el-table-column prop="code" label="服务科室" />
        <el-table-column prop="name" label="服务可是代码" />
        <el-table-column prop="code" label="服务名称" />
        <el-table-column prop="name" label="服务日期" />
        <el-table-column prop="name" label="服务量" />
        <el-table-column prop="name" label="收益科室" />
        <el-table-column prop="name" label="收益科室代码" />
        <el-table-column prop="name" label="录入人" />

        <el-table-column label="操作">

          <template slot-scope="scope">
            <!-- <span class="edit-detail" @click="editDetail(scope.row)">修改</span> -->
            <i class="el-icon-edit-outline" style="padding-top:4px;font-size:20px;color: #207efa;cursor:pointer" @click="editDetail(scope.row)" />
            <i class="el-icon-delete" style="padding-top:4px;padding-left:10px;font-size:20px;color: #207efa;cursor:pointer" @click="delDetail(scope.row)" />
          </template>
        </el-table-column>

      </el-table>
      <div class="pagenation-box">
        <el-pagination
          :current-page.sync="currentPage"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </Container>
  </ContainerGroup>
</template>

<script>
export default {
  name: 'Wage', // 科室-工资对应
  components: {},
  data() {
    return {
      showis: false,
      filterElements: [
        {
          key: 'sexy',
          type: 'date-picker',
          mode: 'daterange',
          label: '服务日期',
          value: '',
          width: 360

        },
        {
          key: 'aihao',
          type: 'Select',
          label: '服务科室',
          value: '',
          width: 210,
          options: [
            {
              label: '看电影',
              value: '1'
            },
            {
              label: '游泳',
              value: '2'
            },
            {
              label: '下象棋',
              value: '3'
            }
          ]
        },
        {
          key: 'aihao',
          type: 'Select',
          label: '服务名称',
          value: '',
          width: 210,
          options: [
            {
              label: '看电影',
              value: '1'
            },
            {
              label: '游泳',
              value: '2'
            },
            {
              label: '下象棋',
              value: '3'
            }
          ]
        }
      ],
      total: 0,
      pageSize: 20,
      currentPage: 1,
      tableData: [
        {
          code: '01',
          name: '工资和津贴',
          operateTime: '2021-09-23 09:01:02',
          isUse: '1'
        },
        {
          code: '02',
          name: '绩效工资',
          operateTime: '2021-09-23 09:01:02',
          isUse: '1'
        },
        {
          code: '03',
          name: '社会保障费',
          operateTime: '2021-09-23 09:01:02',
          isUse: '1'
        },
        {
          code: '04',
          name: '其他人员工资',
          operateTime: '2021-09-23 09:01:02',
          isUse: '0'
        },
        {
          code: '05',
          name: '办公费',
          operateTime: '2021-09-23 09:01:02',
          isUse: '1'
        },
        {
          code: '06',
          name: '业务费',
          operateTime: '2021-09-23 09:01:02',
          isUse: '1'
        }
      ],
      tableLoading: false
    }
  },
  created() {},
  mounted() {},
  methods: {
    resetForm() {},
    searchSubmit() {},
    createNewData() {},
    // 分页
    handleSizeChange(val) {
      this.pageSize = val
      this._getData()
    },
    handleCurrentChange(val) {
      this.pageNum = val
      this._getData()
    }
  }
}
</script>

<style lang="less" scoped>
.el-table--mini,
  .el-table--small,
  .el-table__expand-icon {
    font-size: 14px !important;
  }

  .ck-table-header {
    th {
      background: #fafafa !important;
      height: 48px;
      color: #555555 !important;
    }
  }
.pagenation-box {
  display: flex;
  padding-top: 2px;
  justify-content: flex-end;
}
</style>
